<template>
  <div id="bigBox">
    <div class="Box">
      <!-- 头像 -->
      <div class="avatar">
        <el-avatar src="https://img0.baidu.com/it/u=1741075712,728125372&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></el-avatar>
      </div>
      <div class="details">
        <h3 class="name">肥宝:<p class="comment">我要摸鱼然后到点下班！</p></h3>
        <p class="time">2022.12.09 23:52</p>
      </div>
    </div>
    <div class="Box">
      <!-- 头像 -->
      <div class="avatar">
        <el-avatar src="https://img2.baidu.com/it/u=2502467698,1707201291&fm=26&fmt=auto"></el-avatar>
      </div>
      <div class="details">
        <h3 class="name">肥宝:<p class="comment">我要摸鱼然后到点下班！</p></h3>
        <p class="time">2022.12.09 23:52</p>
      </div>
    </div>
    <div class="Box">
      <!-- 头像 -->
      <div class="avatar">
        <el-avatar src="https://img1.baidu.com/it/u=1685458900,3539196998&fm=26&fmt=auto"></el-avatar>
      </div>
      <div class="details">
        <h3 class="name">肥宝:<p class="comment">我要摸鱼然后到点下班！</p></h3>
        <p class="time">2022.12.09 23:52</p>
      </div>
    </div>
    <div class="Box">
      <!-- 头像 -->
      <div class="avatar">
        <el-avatar src="https://img1.baidu.com/it/u=4177824108,3567164093&fm=26&fmt=auto"></el-avatar>
      </div>
      <div class="details">
        <h3 class="name">肥宝:<p class="comment">我要摸鱼然后到点下班！</p></h3>
        <p class="time">2022.12.09 23:52</p>
      </div>
    </div>
    <div class="Box">
      <!-- 头像 -->
      <div class="avatar">
        <el-avatar src="https://img0.baidu.com/it/u=3024795043,3790591505&fm=26&fmt=auto"></el-avatar>
      </div>
      <div class="details">
        <h3 class="name">肥宝:<p class="comment">我要摸鱼然后到点下班！</p></h3>
        <p class="time">2022.12.09 23:52</p>
      </div>
    </div>
    <div class="Box">
      <!-- 头像 -->
      <div class="avatar">
        <el-avatar src="https://img1.baidu.com/it/u=2801519102,320030020&fm=26&fmt=auto"></el-avatar>
      </div>
      <div class="details">
        <h3 class="name">肥宝:<p class="comment">我要摸鱼然后到点下班！</p></h3>
        <p class="time">2022.12.09 23:52</p>
      </div>
    </div>
    <div class="Box">
      <!-- 头像 -->
      <div class="avatar">
        <el-avatar src="https://img0.baidu.com/it/u=4118703068,2760674539&fm=26&fmt=auto"></el-avatar>
      </div>
      <div class="details">
        <h3 class="name">肥宝:<p class="comment">我要摸鱼然后到点下班！</p></h3>
        <p class="time">2022.12.09 23:52</p>
      </div>
    </div>
    <div class="Box">
      <!-- 头像 -->
      <div class="avatar">
        <el-avatar src="https://img1.baidu.com/it/u=2787186746,1698501222&fm=26&fmt=auto"></el-avatar>
      </div>
      <div class="details">
        <h3 class="name">肥宝:<p class="comment">我要摸鱼然后到点下班！</p></h3>
        <p class="time">2022.12.09 23:52</p>
      </div>
    </div>
    <el-pagination
      :page-size="5"
      :pager-count="5"
      layout="prev, pager, next"
      :total="200"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'CommentPage'
}
</script>

<style scoped>
#bigBox{
  background-color: white;
}
.Box{
  display: flex;
  flex-direction: row;
  padding-top: 5px;
  background-color: white;
  margin-bottom: 10px;
}
.avatar{
  width: 62px;
}
.details{
  padding-top: 3px;
  width: 558px;
  display: flex;
  flex-direction: column;
}
.details .name,.time,.comment{
  height: 20px;
  line-height: 20px;
  text-align: left;
  margin: 0;
  display: inline-block;
}
.name{
  font-weight: 600;
  font-size: 14px;
  color: #3598db;
}
.time{
  color: darkgray;
  font-size: 8px;
}
.comment{
  font-size: 14px;
  font-weight: 400;
  color: black;
}
</style>
